<template>
  <div class="date">
    <ul class="date-ul">
      <li>
        <div class="date-a">
          <div class="date-c">
            <h3>18</h3>
            <p>星期一</p>
          </div>
          <div class="date-b">
            <p class="p1">2021年10月</p>
            <p>亲爱的的朋友,下午好</p>
          </div>
        </div>
        <div class="date-d">
          <p>点击获取天气信息</p>
        </div>
      </li>
      <li>
        <div class="date-a">
          <div class="date-c">
            <span class="iconfont icon-e"></span>
          </div>
          <div class="date-b">
            <p class="p2">请查收您的9月账单</p>
            <p class="p3">属于你的幸福生活清单</p>
          </div>
        </div>
      </li>
      <li>
        <div class="date-a">
          <div class="date-c">
            <span class="iconfont icon-xiaoxiangtubiao"></span>
          </div>
          <div class="date-b">
            <p class="p2">签短信信使享好礼</p>
          </div>
        </div>
        <div class="date-d">
          <button>立即签约</button>
        </div>
      </li>
    </ul>
    <div class="serve">
      <div class="serve-a">
        <span>网点服务</span>
        <span class="iconfont icon-renwuzhongxin"></span>
      </div>
      <div class="serve-b"></div>
      <div class="serve-c">
        <button>取号</button>
      </div>
    </div>
    <div class="total">
      <div class="total-a">
        <h4>环球通</h4>
      </div>
      <div class="total-b">
        <img src="images/1_07.gif" alt="" />
        <ul>
          <li>
            <span class="iconfont icon-zhuanzhanghuikuan"></span>
            <p>结售汇</p>
          </li>
          <li>
            <span class="iconfont icon-kuajinghuikuan"></span>
            <p>跨境汇款</p>
          </li>
          <li>
            <span class="iconfont icon-zixinzhengmingzhaopian"></span>
            <p>资信证明</p>
          </li>
          <li>
            <span class="iconfont icon-daikuan"></span>
            <p>外币预约</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="Play">
      <h4>工银直播</h4>
      <img src="images/1_10.gif" alt="" />
    </div>
    <div class="blak">
      <div class="blak-a">
        <h4>积分商城</h4>
        <span>积分详情</span>
      </div>
      <img src="images/1_12.gif" alt="" />
    </div>
    <div class="over">
      <h4>余额理财</h4>
      <div class="over-a">
        <p>工银瑞信添益快线货币</p>
        <div class="over-b">
          <div class="over-c">
            <h3>2.03%</h3>
            <span>七日年化</span>
          </div>
          <div class="over-d">
            <ul>
              <li>
                <span>收益稳健</span>
                <span>随时支出</span>
              </li>
              <li>
                <span>0.5226元</span>
                <span>万分收益</span>
              </li>
            </ul>
          </div>
        </div>
        <button>立即购买</button>
      </div>
    </div>
    <div class="Play">
      <h4>本地服务</h4>
      <img src="images/1_10.gif" alt="" />
    </div>
    <div class="fund">
      <div class="fund-a">
          <h4>常用缴费</h4>
          <span>更多</span>
      </div>
      <div class="fund-b">
         <img src="images/1_12.gif" alt="" />
         <ul>
           <li>
             <span class="iconfont icon-hy-rain4"></span>
             <p>水费</p>
           </li>
           <li>
             <span class="iconfont icon-ranqifei"></span>
             <p>燃气费</p>
           </li>
           <li>
             <span class="iconfont icon-electricity_icon"></span>
             <p>电费</p>
           </li>
           <li>
             <span class="iconfont icon-gengduo"></span>
             <p>更多</p>
           </li>
         </ul>
      </div>
  </div>
  <div class="money">
    <div class="money-a">
      <h4>存款</h4>
      <span>更多</span>
    </div>
    <ul>
      <Deposit v-for="(v,i) in arr" :key="i" :texta="v.a" :textb="v.b"/>
    </ul>
  </div>
  </div>
</template>

<script>
import Deposit from '@/components/wealth/deposit.vue'
export default {
  data(){
    return {
      arr:[
         {a: "1.55%", b: "50元起购 6个月" },
        { a: "1.75%", b: "50元起购 1年" },
        {a: "2.55%", b: "50元起购 2年" },
      ]
    }
  },
  components:{
    Deposit
  }
};
</script>

<style scoped>
img {
  width: 2.9rem;
}
.date {
  width: 2.9rem;
  height: 0.6rem;
  background-color: #c9daf8;
  margin: auto;
}
.date-ul {
  height: 2.07rem;
  margin: 0.17rem 0;
}
.date-ul li {
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.date-a {
  width: 1.5rem;
  display: flex;
  justify-content: space-between;
}
.p1 {
  font-size: 0.08rem;
}
.date-b {
  width: 1.05rem;
  margin-top: 0.1rem;
  font-size: 0.12rem;
}

.date-c {
  margin-top: 0.08rem;
  margin-left: 0.15rem;
}
.date-c p {
  width: 0.35rem;
  font-size: 0.08rem;
}
.date-d {
  width: 0.5rem;
  font-size: 0.12rem;
  margin-top: 0.1rem;
  margin-right: 0.1rem;
}
.p2 {
  font-size: 0.12rem;
  font-weight: 900;
}
.p3 {
  font-size: 0.08rem;
}
.date-d button {
  width: 0.6rem;
  height: 0.27rem;
  border: 0.01rem solid red;
  color: red;
  border-radius: 0.5rem;
  background-color: white;
}
.serve-a span {
  font-size: 0.15rem;
}
.icon-renwuzhongxin {
  margin-left: 0.18rem;
  color: #598dec;
}
.serve-b {
  height: 1.37rem;
}
.serve-c {
  height: 0.59rem;
  display: flex;
  align-items: center;
}
.serve-c button {
  width: 1.2rem;
  height: 0.3rem;
  background-color: #fd6165;
  color: white;
  font-size: 0.13rem;
  font-weight: 900;
  display: block;
  margin: auto;
  border-radius: 0.5rem;
  border: none;
}
.total {
  padding-bottom: 0.1rem;
}
.total-a {
  height: 0.5rem;
  display: flex;
  align-items: center;
}
.total-b ul {
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  font-size: 0.13rem;
}
.total-b ul span {
  font-size: 0.16rem;
}
h4 {
  line-height: 0.5rem;
}
.blak-a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blak-a span {
  font-size: 0.12rem;
}
.over-a p {
  width: 2.9rem;
  height: 0.44rem;
  background-color: #fef4f3;
  text-align: center;
  line-height: 0.44rem;
  margin-bottom: 0.2rem;
}
.over-b {
  display: flex;
  justify-content: space-between;
  height: 0.5rem;
  /* margin-bottom: 0.16rem; */
}
.over-d ul{
  display: flex;
  font-size: 0.12rem;
}
.over-d li{
  width: 0.6rem;
  margin: 0.04rem 0.06rem;
}
.over-c h3{
  color: #fd6165;
}
.over-a button{
  width: 1.2rem;
  height: 0.3rem;
  background-color: #fd6165;
  color: white;
  font-size: 0.13rem;
  font-weight: 900;
  display: block;
  margin: auto;
  border-radius: 0.5rem;
  border: none;
}
.fund-a{
  display: flex;
  justify-content: space-between;
  height: 0.66rem;
  align-items: center;
}
.fund-b ul{
  height: 0.78rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.fund-b ul span{
  margin-bottom: 0.12rem;
}
.money-a{
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.money ul{
  width: 2.84rem;
  height: 1.43rem;
  padding-bottom: 0.5rem;
  display: flex;
}
.money ul li{
  width: 0.95rem;
  text-align: center;
}
.money ul h4{
  margin-top: -0.1rem;
  font-size: 0.1rem;
}
.money ul li .p1{
  font-size: 0.1rem;
  margin-top: -0.15rem;
  color: #fd6165;
}
.money ul li h3{
  margin-top: 0.2rem;
  color: #fd6165;
}
.money .p2{
  font-size: 0.08rem;
  color: gray;
}
</style>